@import "../../../helpers/variables";
@import "../../../frontend/breakpoints/proxy";

.e--ua-appleWebkit {
	// Fix glitch in Apple webkit browsers (inline-block items with word-spacing + text-align right)
	&.rtl { --flex-right: flex-start; }

	@mixin social-icons-align-right-safari($device: '') {
		.elementor-widget-social-icons.e-grid-align#{$device}-right,
		.elementor-share-buttons#{$device}--align-right {
			--justify-content: var(--flex-right, flex-end);
		}

		.elementor-widget-social-icons.e-grid-align#{$device}-center,
		.elementor-share-buttons#{$device}--align-center {
			--justify-content: center;
		}

		.elementor-grid-0 {
			&.elementor-widget-social-icons.e-grid-align#{$device}-right,
			&.elementor-widget-social-icons.e-grid-align#{$device}-center,
			&.elementor-share-buttons--align#{$device}-right,
			&.elementor-share-buttons--align#{$device}-center,
			&.elementor-share-buttons--align#{$device}-justify {

				.elementor-grid {
					width: auto;
					display: flex;
					flex-wrap: wrap;
					justify-content: var(--justify-content, space-between);
					margin-inline: calc(-0.5 * var(--grid-column-gap));

					&-item {
						margin-inline: calc(0.5 * var(--grid-column-gap));
					}
				}
			}
		}

		.elementor-grid-0 {
			&.elementor-widget-social-icons.e-grid-align#{$device}-left,
			&.elementor-share-buttons#{$device}--align-left {
				.elementor-grid {
					display: inline-block;

					&,
					&-item {
						margin-inline: 0;
					}
				}
			}
		}
	}

	@include social-icons-align-right-safari();

	@media (max-width: $screen-tablet-max) {
		@include social-icons-align-right-safari('-tablet');
	}

	@media (max-width: $screen-mobile-max) {
		@include social-icons-align-right-safari('-mobile');
	}
}
